<template>
	<div>
     <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="title" left-arrow @click-left="$router.go(-1)" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell class="news-content" v-for="item in articleList"  @click="oNnewsList(item.id)" :key="item.id" >
        <ul>
          <li  >
            <div class="fl new-box">
              <span class="new-span">{{item.title}}</span>
              <div class="new-data">
                <div class="fl data">{{item.updateDate}}</div>
                <div class="fr data">{{item.number}}</div>
              </div>
            </div>
            <div class="fr new-img">
              <img :src="item.funImg" alt="">
            </div>
          </li>
        </ul> 
       </van-cell>
    </van-list>
	</div>
</template>
<script type="text/javascript">
import apiHttp from '../../../../api/index'
import { Toast } from 'vant';
export default {
  data() {
    return {
      id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
      title: "社区综合文化服务中心",
      articleList:[],
      loading: false,
      finished: false,
      total:-1,
      page:0,
      userId:sessionStorage.getItem('userId'),
    };
  },
  methods: {
    oNnewsList(id){
      this.$router.push({path:"/details/details",query: { id: id}});
    },
    // 新闻列表---接口
    getArticleList(){
      let params ={
        commId:this.id,
        page : this.page,
        pageSize :10,
        type:7
      }
      apiHttp.comIndex.getArticleList(params,resp=>{
      if(resp.resultCode == '000000'){
          for(let i = 0; i < resp.data.articleList.length; i++){
            this.articleList.push(resp.data.articleList[i])
          }
          this.total = resp.data.total
          this.loading = false;
        }else{
          Toast(resp.resultMsg)
        }
      })
    },
    onLoad(){
      if(this.articleList.length == this.total){
          this.finished  = true
          this.loading = false;
      }else{
          this.page++
          this.getArticleList();
      }
    },
  },
  mounted: function(){
    //这个是钩子函数
  }
}
</script>
<style scoped>
   @import '../../../../assets/css/index.css'; 
   .van-cell{
     width: 90%;
   }
   .new-span{
   height: 1.6rem;
 } 
</style>
